#ステップバイステップのガイド
このガイドに従って、チャートの種類と要素、データセット、カスタマイズ、プラグイン、コンポーネント、ツリーシェークなど、Chart.js のすべての主要な概念を理解してください。本文内のリンクを遠慮なくたどってください。
いくつかのグラフを使用して Chart.js データ視覚化を最初から構築します。
#Chart.js を使用して新しいアプリケーションを構築する
新しいフォルダーに、package.json次の内容のファイル:
{
"name": "chartjs-example",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
},
"devDependencies": {
"parcel": "^2.6.2"
},
"dependencies": {
"@cubejs-client/core": "^0.31.0",
"chart.js": "^4.0.0"
}
}
最新のフロントエンド アプリケーションは JavaScript モジュール バンドラーを使用することが多いため、小包 (新しいウィンドウが開きます)構成不要の優れたビルド ツールとして。 Chart.js v4 と JavaScript クライアントもインストールしています。キューブ (新しいウィンドウが開きます)、実世界のデータを取得するために使用するデータ アプリ用のオープンソース API (詳細は後ほど)。
走るnpm install、yarn install、 またpnpm install依存関係をインストールしてから、srcフォルダ。そのフォルダー内には、非常に単純なファイルが必要になります。index.htmlファイル：
<!doctype html>
<html lang="en">
<head>
<title>Chart.js example</title>
</head>
<body>
<!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
<div style="width: 800px;"><canvas id="acquisitions"></canvas></div>
<!-- <script type="module" src="dimensions.js"></script> -->
<script type="module" src="acquisitions.js"></script>
</body>
</html>
ご覧のとおり、Chart.js には最小限のマークアップが必要です。canvasのタグを付けますidこれについては後でチャートを参照します。デフォルトでは、Chart.js チャートは次のようになります。応答性の高いそして、封入されている容器全体を取り出します。そこで、幅を設定します。divチャートの幅を制御します。
最後に、src/acquisitions.js次の内容のファイル:
import Chart from 'chart.js/auto'
(async function() {
const data = [
{ year: 2010, count: 10 },
{ year: 2011, count: 20 },
{ year: 2012, count: 15 },
{ year: 2013, count: 25 },
{ year: 2014, count: 22 },
{ year: 2015, count: 30 },
{ year: 2016, count: 28 },
];
new Chart(
document.getElementById('acquisitions'),
{
type: 'bar',
data: {
labels: data.map(row => row.year),
datasets: [
{
label: 'Acquisitions by year',
data: data.map(row => row.count)
}
]
}
}
);
})();
このコードを見てみましょう:
- 輸入します
Chart、メインの Chart.js クラス、特別なクラスからchart.js/auto道。読み込まれます利用可能なすべての Chart.js コンポーネント(これは非常に便利です) ただし、ツリーシェイクは禁止されています。それについては後で説明します。 - 新しいインスタンスを作成します
Chartインスタンスを作成し、チャートがレンダリングされるキャンバス要素とオプション オブジェクトの 2 つの引数を指定します。 - チャートの種類を指定するだけです (
bar) を提供しますdataで構成されていますlabels(多くの場合、データ ポイントの数値またはテキストによる説明) および配列datasets(Chart.js は、ほとんどのグラフ タイプで複数のデータセットをサポートします)。各データセットは、labelデータポイントの配列が含まれています。 - 現時点では、ダミー データのエントリがいくつかあるだけです。そこで、抽出します
yearとcountの配列を生成するプロパティlabels唯一のデータセット内のデータポイント。
サンプルを実行してみましょうnpm run dev、yarn dev、 またpnpm devそして、に移動しますローカルホスト:1234 (新しいウィンドウが開きます)Web ブラウザで:
わずか数行のコードで、多くの機能を備えたグラフが完成します。伝説、グリッド線、ダニ、 とツールチップホバー上に表示されます。 Web ページを数回更新して、グラフも表示されていることを確認します。アニメーション化された。 「Acquisitions by year」ラベルをクリックして、データセットの表示を切り替えることもできることを確認してください (複数のデータセットがある場合に特に便利です)。
#簡単なカスタマイズ
Chart.js グラフをカスタマイズする方法を見てみましょう。まず、チャートが即座に表示されるようにアニメーションをオフにしましょう。次に、データセットが 1 つしかなく、非常に簡単なデータしかないため、凡例とツールチップを非表示にします。
交換してくださいnew Chart(...);での呼び出しsrc/acquisitions.js次のスニペットで:
new Chart(
document.getElementById('acquisitions'),
{
type: 'bar',
options: {
animation: false,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
}
},
data: {
labels: data.map(row => row.year),
datasets: [
{
label: 'Acquisitions by year',
data: data.map(row => row.count)
}
]
}
}
);
ご覧のとおり、追加したのはoptionsプロパティを 2 番目の引数に追加します。これにより、Chart.js のあらゆる種類のカスタマイズ オプションを指定できます。のアニメーションが無効になっています経由で提供されるブールフラグを使用してanimation。チャート全体のほとんどのオプション (例:応答性またデバイスのピクセル比) このように構成されています。
凡例とツールチップは、次の各セクションの下にあるブール値フラグによって非表示になります。plugins。 Chart.js の機能の一部はプラグイン、つまり自己完結型の個別のコードに抽出されることに注意してください。そのうちのいくつかは、の一部として利用可能ですChart.jsのディストリビューション (新しいウィンドウが開きます)、他のプラグインは独立して維持されており、素晴らしいリスト (新しいウィンドウが開きます)プラグイン、フレームワーク統合、および追加のチャート タイプの追加。
更新された最小限のグラフがブラウザーに表示されるはずです。
#現実世界のデータ
ハードコーディングされ、サイズが制限され、非現実的なデータでは、Chart.js の可能性を最大限に発揮するのは困難です。すぐにデータ API に接続して、サンプル アプリケーションを実稼働ユース ケースに近づけましょう。
を作成しましょうsrc/api.js次の内容のファイル:
import { CubejsApi } from '@cubejs-client/core';
const apiUrl = 'https://heavy-lansford.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1';
const cubeToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjEwMDAwMDAwMDAsImV4cCI6NTAwMDAwMDAwMH0.OHZOpOBVKr-sCwn8sbZ5UFsqI3uCs6e4omT7P6WVMFw';
const cubeApi = new CubejsApi(cubeToken, { apiUrl });
export async function getAquisitionsByYear() {
const acquisitionsByYearQuery = {
dimensions: [
'Artworks.yearAcquired',
],
measures: [
'Artworks.count'
],
filters: [ {
member: 'Artworks.yearAcquired',
operator: 'set'
} ],
order: {
'Artworks.yearAcquired': 'asc'
}
};
const resultSet = await cubeApi.load(acquisitionsByYearQuery);
return resultSet.tablePivot().map(row => ({
year: parseInt(row['Artworks.yearAcquired']),
count: parseInt(row['Artworks.count'])
}));
}
export async function getDimensions() {
const dimensionsQuery = {
dimensions: [
'Artworks.widthCm',
'Artworks.heightCm'
],
measures: [
'Artworks.count'
],
filters: [
{
member: 'Artworks.classification',
operator: 'equals',
values: [ 'Painting' ]
},
{
member: 'Artworks.widthCm',
operator: 'set'
},
{
member: 'Artworks.widthCm',
operator: 'lt',
values: [ '500' ]
},
{
member: 'Artworks.heightCm',
operator: 'set'
},
{
member: 'Artworks.heightCm',
operator: 'lt',
values: [ '500' ]
}
]
};
const resultSet = await cubeApi.load(dimensionsQuery);
return resultSet.tablePivot().map(row => ({
width: parseInt(row['Artworks.widthCm']),
height: parseInt(row['Artworks.heightCm']),
count: parseInt(row['Artworks.count'])
}));
}
そこで何が起こっているのか見てみましょう:
- 私たち
importの JavaScript クライアント ライブラリキューブ (新しいウィンドウが開きます)データ アプリ用のオープンソース API である場合は、API URL (apiUrl) と認証トークン (cubeToken)、最後にクライアントをインスタンス化します(cubeApi）。 - Cube API は以下でホストされていますキューブクラウド (新しいウィンドウが開きます)そしてデータベースに接続します公開データセット (新しいウィンドウが開きます)コレクション内のすべての芸術作品を表す約 140,000 件のレコード近代美術館 (新しいウィンドウが開きます)アメリカのニューヨークで。確かに、私たちが現在入手しているものよりも現実世界のデータセットです。
- API からデータをフェッチするために、いくつかの非同期関数を定義します。
getAquisitionsByYearとgetDimensions。最初のものは取得年ごとのアートワークの数を返し、もう 1 つは幅と高さのペアごとのアートワークの数を返します (これは別のグラフで必要になります)。 - 見てみましょう
getAquisitionsByYear。まず、宣言的な JSON ベースのクエリをacquisitionsByYearQuery変数。ご覧のとおり、すべての場合にそれを指定しますyearAcquired私たちはそれを手に入れたいと思っていますcount芸術作品の。yearAcquired設定する必要があります(つまり、未定義ではありません)。結果セットは次の基準でソートされます。yearAcquired昇順で。 - 次に、
resultSet電話することでcubeApi.loadそしてそれを目的のオブジェクトの配列にマッピングしますyearとcountプロパティ。
次に、実際のデータをグラフに配信しましょう。いくつかの変更を適用してくださいsrc/acquisitions.js: インポートを追加し、の定義を置き換えます。data変数。
import { getAquisitionsByYear } from './api'
// ...
const data = await getAquisitionsByYear();
終わり！実際のデータを含むグラフは次のようになります。 1964 年、1968 年、2008 年に何か興味深いことが起こったようです。
棒グラフの作成は完了です。別の Chart.js グラフ タイプを試してみましょう。
#さらなるカスタマイズ
Chart.js は、多くの一般的なグラフの種類をサポートしています。
例えば、バブルチャート3 つの次元のデータを同時に表示できます。xとy軸は 2 次元を表し、3 番目の次元は個々のバブルのサイズによって表されます。
グラフを作成するには、すでに実行中のアプリケーションを停止してから、d8fec4d6-b799-4b9e-b20f-c793becbffffdを選択し、次の 2 行のコメントを解除します。
<div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/>
<script type="module" src="dimensions.js"></script>
次に、src/dimensions.js次の内容のファイル:
import Chart from 'chart.js/auto'
import { getDimensions } from './api'
(async function() {
const data = await getDimensions();
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
data: {
labels: data.map(x => x.year),
datasets: [
{
label: 'Dimensions',
data: data.map(row => ({
x: row.width,
y: row.height,
r: row.count
}))
}
]
}
}
);
})();
おそらく、そこではすべてが非常に簡単です。API からデータを取得し、次のコマンドを使用して新しいグラフをレンダリングします。bubble型として、3 次元のデータを渡します。x、y、 とr(半径) プロパティ。
次に、キャッシュをリセットしますrm -rf .parcel-cacheそしてアプリケーションを再度起動しますnpm run dev、yarn dev、 またpnpm dev。新しいチャートを今すぐ確認できます。
まあ、見た目は美しくありません。
まず、グラフは正方形ではありません。アートワークの幅と高さは同様に重要なので、グラフの幅も高さと同じにしたいと考えています。デフォルトでは、Chart.js チャートにはアスペクト比1 (ドーナツ チャートなど、すべての放射状チャートの場合) または 2 (残りのすべてのチャートの場合) のいずれかです。グラフのアスペクト比を変更しましょう。
// ...
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
options: {
aspectRatio: 1,
},
// ...
見た目がかなり良くなりました:
ただし、まだ理想的ではありません。横軸の範囲は 0 ～ 500、縦軸の範囲は 0 ～ 450 です。デフォルトでは、Chart.js は軸の範囲 (最小値と最大値) をデータセットで提供される値に自動的に調整するため、グラフは「適合」します。 " あなたのデータ。 MoMaのコレクションには高さ450～500cmの作品は存在しないそうです。を変更しましょう軸構成それをグラフで説明するには:
// ...
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
options: {
aspectRatio: 1,
scales: {
x: {
max: 500
},
y: {
max: 500
}
}
},
// ...
素晴らしい！更新されたグラフを見てください。
ただし、もう 1 つ注意点があります。これらの数字は何ですか?単位がセンチメートルであることはあまり明白ではありません。を適用しましょうカスタム目盛フォーマット物事を明確にするために両方の軸に注目してください。各ティック値をフォーマットするために呼び出されるコールバック関数を提供します。更新された軸構成は次のとおりです。
// ...
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
options: {
aspectRatio: 1,
scales: {
x: {
max: 500,
ticks: {
callback: value => `${value / 100} m`
}
},
y: {
max: 500,
ticks: {
callback: value => `${value / 100} m`
}
}
}
},
// ...
完璧です。これで、両方の軸に適切な単位が表示されました。
#複数のデータセット
Chart.js は各データセットを個別にプロットし、カスタム スタイルをそれらに適用できます。
チャートを見てください。同じようなバブルの「線」が目に見えています。xとy正方形のアートワークを表す座標。これらのバブルを独自のデータセットに入れて、別の方法でペイントできたら素晴らしいでしょう。また、「より高い」アートワークと「より広い」アートワークを分離し、異なる方法でペイントすることもできます。
その方法は次のとおりです。交換してくださいdatasets次のコードで:
// ...
datasets: [
{
label: 'width = height',
data: data
.filter(row => row.width === row.height)
.map(row => ({
x: row.width,
y: row.height,
r: row.count
}))
},
{
label: 'width > height',
data: data
.filter(row => row.width > row.height)
.map(row => ({
x: row.width,
y: row.height,
r: row.count
}))
},
{
label: 'width < height',
data: data
.filter(row => row.width < row.height)
.map(row => ({
x: row.width,
y: row.height,
r: row.count
}))
}
]
// ..
ご覧のとおり、異なるラベルを持つ 3 つのデータセットを定義します。各データセットは、次の方法で抽出された独自のデータ スライスを取得します。filter。これで、それらは視覚的に区別できるようになり、すでにご存知のとおり、それらの表示/非表示を個別に切り替えることができます。
ここではデフォルトのカラーパレットを使用します。ただし、どのグラフの種類も多くの機能をサポートしていることに注意してください。データセットのオプション気軽にカスタマイズできるということ。
#プラグイン
Chart.js グラフをカスタマイズするもう 1 つの、そして非常に強力な方法は、プラグインを使用することです。いくつかは次の場所で見つけることができます。プラグインディレクトリ (新しいウィンドウが開きます)または、独自のアドホックなものを作成します。 Chart.js エコシステムでは、これは慣用的であり、プラグインを使用してチャートを微調整することが期待されています。たとえば、カスタマイズできますキャンバスの背景また枠線を追加する単純なアドホックプラグインを使用してそれに接続します。後者を試してみましょう。
プラグインには、豊富なAPIしかし、一言で言えば、プラグインは次のようなオブジェクトとして定義されます。nameおよび拡張ポイントで定義された 1 つ以上のコールバック関数。次のスニペットを次のスニペットの前と代わりに挿入します。new Chart(...);での呼び出しsrc/dimensions.js:
// ...
const chartAreaBorder = {
id: 'chartAreaBorder',
beforeDraw(chart, args, options) {
const { ctx, chartArea: { left, top, width, height } } = chart;
ctx.save();
ctx.strokeStyle = options.borderColor;
ctx.lineWidth = options.borderWidth;
ctx.setLineDash(options.borderDash || []);
ctx.lineDashOffset = options.borderDashOffset;
ctx.strokeRect(left, top, width, height);
ctx.restore();
}
};
new Chart(
document.getElementById('dimensions'),
{
type: 'bubble',
plugins: [ chartAreaBorder ],
options: {
plugins: {
chartAreaBorder: {
borderColor: 'red',
borderWidth: 2,
borderDash: [ 5, 5 ],
borderDashOffset: 2,
}
},
aspectRatio: 1,
// ...
ご覧のとおり、この中ではchartAreaBorderプラグインでは、キャンバス コンテキストを取得し、現在の状態を保存し、スタイルを適用し、グラフ領域の周囲に長方形を描画して、キャンバスの状態を復元します。プラグインも渡しますpluginsしたがって、この特定のチャートにのみ適用されます。プラグインオプションも渡しますoptions.plugins.chartAreaBorder;確かにプラグインのソース コードにハードコーディングすることもできますが、この方法の方がはるかに再利用可能です。
バブル チャートがさらに派手になりました。
#木を揺らす
運用環境では、エンドユーザーがデータ アプリケーションをより速くロードして、より良いエクスペリエンスを得ることができるように、できる限り少ないコードを配布するよう努めています。そのためには申請が必要です木を揺らす (新しいウィンドウが開きます)これは、JavaScript バンドルから未使用のコードを削除することを意味する派手な用語です。
Chart.js は、コンポーネント設計でツリーシェイキングを完全にサポートしています。すべての Chart.js コンポーネントを一度に登録し (プロトタイプを作成するときに便利です)、アプリケーションにバンドルすることができます。または、必要なコンポーネントのみを登録して、サイズがはるかに小さい最小限のバンドルを取得することもできます。
サンプルアプリケーションを調べてみましょう。バンドルのサイズは何ですか?アプリケーションを停止して実行できますnpm run build、 またyarn build、 またpnpm build。しばらくすると、次のような内容が表示されます。
% yarn build
yarn run v1.22.17
$ parcel build src/index.html
✨ Built in 88ms
dist/index.html 381 B 164ms
dist/index.74a47636.js 265.48 KB 1.25s
dist/index.ba0c2e17.js 881 B 63ms
✨ Done in 0.51s.
Chart.js とその他の依存関係が 1 つの 265 KB ファイルにバンドルされていることがわかります。
バンドルのサイズを小さくするには、いくつかの変更を適用する必要があります。src/acquisitions.jsとsrc/dimensions.js。まず、両方のファイルから次の import ステートメントを削除する必要があります。import Chart from 'chart.js/auto'。
代わりに、必要なコンポーネントのみをロードし、次を使用して Chart.js に「登録」しましょう。Chart.register(...)。必要なものは次のとおりですsrc/acquisitions.js:
import {
Chart,
Colors,
BarController,
CategoryScale,
LinearScale,
BarElement,
Legend
} from 'chart.js'
Chart.register(
Colors,
BarController,
BarElement,
CategoryScale,
LinearScale,
Legend
);
そして、これがそのスニペットですsrc/dimensions.js:
import {
Chart,
Colors,
BubbleController,
CategoryScale,
LinearScale,
PointElement,
Legend
} from 'chart.js'
Chart.register(
Colors,
BubbleController,
PointElement,
CategoryScale,
LinearScale,
Legend
);
に加えて、Chartクラスでは、チャートの種類、スケール、その他のチャート要素 (棒や点など) のコントローラーもロードしています。利用可能なすべてのコンポーネントを検索できます。ドキュメンテーション。
あるいは、コンソールで Chart.js のアドバイスに従うこともできます。たとえば、インポートを忘れた場合BarController棒グラフの場合、ブラウザ コンソールに次のメッセージが表示されます。
Unhandled Promise Rejection: Error: "bar" is not a registered controller.
からのインポートを注意深く確認することを忘れないでください。chart.js/autoアプリケーションを本番環境に向けて準備するとき。このように 1 回インポートするだけで、ツリーシェイキングを効果的に無効にできます。
ここで、アプリケーションをもう一度調べてみましょう。走るyarn buildすると次のようなものが得られます:
% yarn build
yarn run v1.22.17
$ parcel build src/index.html
✨ Built in 88ms
dist/index.html 381 B 176ms
dist/index.5888047.js 208.66 KB 1.23s
dist/index.dcb2e865.js 932 B 58ms
✨ Done in 0.51s.
選択したコンポーネントのみをインポートして登録することで、56 KB 以上の不要なコードを削除しました。他の依存関係がバンドル内で最大 50 KB を占めることを考えると、ツリーシェイキングにより、サンプル アプリケーションのバンドルから Chart.js コードの最大 25% を削除できます。
#次のステップ
これで、グラフの種類と要素、データセット、カスタマイズ、プラグイン、コンポーネント、ツリーシェークなど、Chart.js の主要な概念をすべて理解できました。
ぜひたくさんレビューしてみてくださいチャートの例ドキュメントで確認してください素晴らしいリスト (新しいウィンドウが開きます)Chart.js プラグインと追加のグラフ タイプ、およびフレームワークの統合 (新しいウィンドウが開きます)(例: React、Vue、Svelte など)。また、ぜひご参加くださいChart.js Slack (新しいウィンドウが開きます)そしてフォローしてくださいTwitter の Chart.js (新しいウィンドウが開きます)。
Chart.js を使った構築を楽しんで頑張ってください!
←統合 アクセシビリティ→